layui.config({
    base: '/layui/lay/modules/'
}).extend({
    treetable: 'treetable-lay/treetable'
}).use(['treetable','table', 'layer', 'form', 'laypage', 'laydate'], function () {
    var table = layui.table //表格
        , layer = layui.layer //弹层
        , form = layui.form //form表单
        , laypage = layui.laypage //分页
        , laydate = layui.laydate//日期
        ,treetable = layui.treetable;

    //第一个实例
    table.render({
        elem: '#demo'
        , id: 'tableReload'
        , toolbar: '#toolbarDemo'
        // ,height: 312
        , url: '/api/outline/query' //数据接口
        , request: {
            pageName: 'page' //页码的参数名称，默认：page
            , limitName: 'size' //每页数据量的参数名，默认：limit
        }
        , limit: 5
        , page: {
            curr: 0
        } //开启分页
        , cols: [[ //表头
            {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
            , {field: 'name', title: '名称', width: 270}
            , {title: '课程', width: 150, templet: "<div>{{d.course.name}}</div>"}
            , {title: '年级', width: 100, templet: "<div>{{d.course.grade.name}}</div>"}
            , {title: '状态', width: 100,
                templet: "<div>{{d.status?`<span style='color:green'>审核通过</span>`:`<span style='color:red'>待审核</span>`}}</div>"}
            , {fixed: 'right', width: 100, align: 'center', toolbar: '#oper-col'}
            // ,{templet: '#oper-col', title: '操作', width: 150}
        ]]
        , title: '图文文字管理'
    });

    // 查看
    table.on('tool(demo)', function (obj) {
        var data = obj.data;
        switch (obj.event) {
            case 'detail':
                renderTable(data.content);
                detail('大纲详情', 800, 600)
                break;
        }
    });
    //监听提交 lay-filter="search"
    form.on('submit(search)', function (data) {
        // layer.msg(JSON.stringify(data.field));//表格数据序列化
        var name = data.field.name;
        //数据表格重载
        table.reload('tableReload', {
            page: {
                curr: 1 //重新从第 1 页开始
            }
            , where: {//这里传参  向后台
                name: name
            }
            , url: '/api/outline/query'//后台做模糊搜索接口路径
            , method: 'get'
        });
        return false;//false：阻止表单跳转  true：表单跳转
    });

    var renderTable = function (data) {
        // layer.load(2);
        treetable.render({
            treeColIndex: 0,          // treetable新增参数
            treeSpid: -1,             // treetable新增参数
            treeIdName: 'd_id',       // treetable新增参数
            treePidName: 'd_pid',     // treetable新增参数
            treeDefaultClose: true,   // treetable新增参数
            treeLinkage: true,        // treetable新增参数
            elem: '#table1',
            data: data,
            cols: [[
                // {type: 'number'},
                // {field: 'id', title: 'id'},
                {field: 'num', title: '标号', width: 150},
                {field: 'name', title: '名称', width:225},
                {field: 'intro', title: '介绍', width:350},
                // {templet: '#oper-col', title: '操作', width: 100}
                // {field: 'pid', title: 'pid'},
            ]]
        });
    };


});


function detail(title, w, h) {
    if (title == null || title == '') {
        title = false;
    }
    if (w == null || w == '') {
        w = ($(window).width() * 0.9);
    }
    if (h == null || h == '') {
        h = ($(window).height() - 50);
    }
    ;
    index = layer.open({  //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
        type: 1,
        title: title,
        // area: ['25%', '55%'],//类型：String/Array，默认：'auto'  只有在宽高都定义的时候才不会自适应
        area: [w + 'px', h + 'px'],
        fix: false, //不固定
        maxmin: true,//开启最大化最小化按钮
        shadeClose: true,//点击阴影处可关闭
        shade: 0.4,//背景灰度
        skin: 'layui-layer-rim', //加上边框
        content: $("#article_detail_box").html()
    });

}